<template>
	<div id="tenant_list">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-date-picker v-model="selectData" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable @change="search">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="dialogVisible = true">添加分站</el-button>
			</el-form-item>
			
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
			<el-table-column label="域名" prop="domainName" align="center"></el-table-column>
			<el-table-column label="公司名称" prop="company" align="center"></el-table-column>
			<el-table-column label="微信" prop="wechat" align="center"></el-table-column>
			<el-table-column label="qq" prop="qq" align="center"></el-table-column>
			<el-table-column label="网站logo" prop="favicon" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.favicon | fullPath" alt="" style="width: 50px; height: 50px;">
				</template>
			</el-table-column>
			<el-table-column label="移动端头像" prop="heads" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.heads | fullPath" alt="" style="width: 50px; height: 50px;">
				</template>
			</el-table-column>
			<el-table-column label="网站标题" prop="title" align="center"></el-table-column>
			<el-table-column label="状态" prop="status" align="center">
				<template slot-scope="scope">
					
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button @click="toUpdate(scope.row)" type="text">修改分站</el-button>
					<el-button @click="toSetCost(scope.row.id)" type="text">设置成本</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>
		
		<el-dialog
			:title="formData.id ? '修改': '添加'" 
			:visible.sync="dialogVisible" 
			width="800px" 
			center 
			:before-close="reset"
			:close-on-click-modal="false"
		>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
				<div class="dialog_main">
					<div class="dialog_left">
						<el-form-item label="名称" prop="realName">
							<el-input v-model="formData.realName" placeholder="请输入分站名称"></el-input>
						</el-form-item>
						<el-form-item label="网址" prop="domainName">
							<el-input v-model="formData.domainName" placeholder="请输入分站首页"></el-input>
						</el-form-item>
						<el-form-item label="分站账号" prop="phone">
							<el-input v-if="formData.phone" v-model="formData.phone" placeholder="请输入分站初始账号" disabled="disabled"></el-input>
							<el-input v-else v-model="formData.phone" placeholder="请输入分站初始账号"></el-input>
						</el-form-item>
						<el-form-item label="QQ号" prop="qq">
							<el-input v-model="formData.qq" placeholder="请输入QQ号"></el-input>
						</el-form-item>
						<el-form-item label="首页标题" prop="title">
							<el-input v-model="formData.title" placeholder="请输入首页标题"></el-input>
						</el-form-item>
						<el-form-item label="首页关键词" prop="keyword">
							<el-input type="textarea" v-model="formData.keyword" placeholder="请输入首页关键词"></el-input>
						</el-form-item>
						<el-form-item label="首页描述" prop="descr">
							<el-input type="textarea" v-model="formData.descr" placeholder="请输入首页描述"></el-input>
						</el-form-item>
						<el-form-item label="备案号" prop="beianhao">
							<el-input v-model="formData.beianhao" placeholder="请输入备案号"></el-input>
						</el-form-item>
					</div>
					<div class="dialog_right">
						<el-form-item label="微信二维码" prop="wechat">
							<Upload
							ref="qrcode"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							 />
							<!-- <imgUpload :imgUrl = 'formData.wechat' @change="wechatChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="favicon" prop="favicon">
							<Upload
							ref="favicon"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							 />
							<!-- <imgUpload :imgUrl = 'formData.icon' @change="iconChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="logo" prop="logo">
							<Upload
							ref="logo"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							 />
							<!-- <imgUpload :imgUrl = 'formData.logo' @change="logoChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="移动端头像" prop="heads">
							<Upload
							ref="heads"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							 />
							<!-- <imgUpload :imgUrl = 'formData.heads' @change="logoChange"></imgUpload> -->
						</el-form-item>
					</div>
				</div>
				
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog 
		title="设置成本" 
		width="400px" 
		center  
		:visible.sync="costVisible">
			<el-form :model="costForm" :rules="costRules" ref="costForm" label-width="80px">
				<el-form-item label="快递成本">
					<el-input v-model="costForm.expressCost" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品成本">
					<el-input v-model="costForm.goodsCost" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="costVisible = false">取 消</el-button>
				<el-button type="primary" @click="costVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import Upload from '@/components/utils/Upload'
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
				},
				list: [],
				total: 0,
				loading: false,
				selectData: [],
				dialogVisible: false,
				formLoading: false,
				formData: {
					
				},
				rules: {
					realName: [
						{ required: true, message: '请输入分站名称', trigger: 'blur' }
					],
					realmName: [
						{ required: true, message: '请输入分站域名', trigger: 'blur' }
					],
					domainName: [
						{ required: true, message: '请输入分站首页', trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请输入分站帐号', trigger: 'blur' }
					],
					qq: [
						{ required: true, message: '请输入qq号', trigger: 'blur' }
					],
					wechat: [
						{ required: true, message: '请输入微信号', trigger: 'blur' }
					],
					wechat: [
						{ required: true, message: '请上传微信二维码', trigger: 'blur' }
					],
					favicon: [
						{ required: true, message: '请上传favicon', trigger: 'blur' }
					],
					logo: [
						{ required: true, message: '请输入分站logo', trigger: 'blur' }
					],
					heads: [
						{ required: true, message: '请输入移动端头像', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入分站Title', trigger: 'blur' }
					],
					keyword: [
						{ required: true, message: '请输入关键词', trigger: 'blur' }
					],
					descr: [
						{ required: true, message: '请输入分站简介', trigger: 'blur' }
					],
					beianhao: [
						{ required: true, message: '请输入备案号', trigger: 'blur' }
					],
				},
				// 设置成本
				costVisible: false,
				costForm: {
					id: '',
					expressCost: 0,
					goodsCost: 0,
				},
				costRules: {

				}
				
			};
		},

		components: {
			Upload
		},

		watch: {},

		create() {},

		mounted() {
			this.search();
		},

		methods: {
			
			handleClose(done){
				done() 
			},
			
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				if(this.selectData && this.selectData.length){
					this.params.startTime = this.$moment(this.selectData).format('Y-MM-DD HH:mm:ss')
					this.params.endTime = this.$moment(this.selectData).add(1, 'days').format('Y-MM-DD HH:mm:ss') 
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
					this.selectData = []
				}
				this.getList();
			},
			
			getList() {
				this.loading = true
				this.$request.post({
					url: 'ad/tenant/list',
					params: this.params,
					success: result =>{
						this.list = result.list 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result.total
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},
			
			write(){
				this.formData.wechat = this.$refs.qrcode.path_list[0].path;
				this.formData.favicon = this.$refs.favicon.path_list[0].path;
				this.formData.logo = this.$refs.logo.path_list[0].path;
				this.formData.heads = this.$refs.heads.path_list[0].path;
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						 }
						this.formLoading = true
						var url = 'ad/tenant/' + (this.formData.id ? 'update' : 'add') 
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.search()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			reset(done){
				for(var key in this.formData){
					this.formData[key] = ''
				}
				done();
			},
			
			toUpdate(data) {
				this.formData.id = data.id;
				this.formData.createtime = null;
				this.dialogVisible = true;
				setTimeout(() => {
					this.$refs.qrcode.path_list = [{path: this.$envConfig.serviceUrl + this.formData.wechat}];
					this.$refs.favicon.path_list = [{path: this.$envConfig.serviceUrl + this.formData.favicon}];
					this.$refs.logo.path_list = [{path: this.$envConfig.serviceUrl + this.formData.logo}];
					this.$refs.heads.path_list = [{path: this.$envConfig.serviceUrl + this.formData.heads}];
				},500);
				
			},

			// 设置成本
			toSetCost(id) {
				this.costForm.id = id;
				this.costVisible = true;
			},
			SetCost() {

			}
			
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
	.dialog_main {
		display: flex;
		justify-content: space-between;
	}
	.dialog_left {
		width: 400px;
	}
	.dialog_right {
		width: 300px;
	}
</style>
